<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<link rel="stylesheet" href="static/assets/jstree/style.min.css"/>
<div class="modal fade" id="ocean-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">菜单权限</h4>
            </div>
            <div class="modal-body">
                <div class=" form">
                    <form class="form-horizontal" id="menu-form" method="post"
                          data-url="resources/role/flushAllowedMenu" data-class="">
                        <input type="hidden" id="role" name="role" value="${role}">
                        <div class="form-group">
                            <label for="menuTree" class="control-label col-lg-2"></label>
                            <div class="col-lg-10">
                                <div id="menuTree" class="demo"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <button class="btn btn-success" type="button" onclick="doSubmit()">Save
                                </button>
                                <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript" src="static/assets/jstree/jstree.min.js"></script>
<script type="application/javascript">
    $('#menuTree').jstree({
        "core": {
            "data": {
                "url": "resources/menu/tree",
                "dataType": "json"
            }
        },
        "checkbox": {
            "keep_selected_style": false,
            "three_state": true,
            "cascade": "up+down",
        },
        "plugins": ["checkbox"]
    }).on("loaded.jstree", function () {
        $.post("resources/role/menu", {role: $("#role").val()}, function (data) {
            $.each(data, function (index, item) {
                $("#menuTree").jstree("check_node", item.id);
            });
        });
    });
    function doSubmit() {
        var nodes = $("#menuTree").jstree("get_checked");
        $.each(nodes, function (index, item) {
            var menuInput = $('<input id="' + item + '" type="hidden" name="menu" value="' + item + '"/>');
            $("#menu-form").append(menuInput);
            if (!$("#menuTree").jstree("is_parent", item)) {
                var parent = $("#menuTree").jstree("get_parent", item);
                if ("#" != parent && null == $("#" + parent)) {
                    var menuInput = $('<input id="' + parent + '" type="hidden" name="menu" value="' + parent + '"/>');
                    $("#menu-form").append(menuInput);
                }
            }
        });
        formSubmit();
    }
</script>